<template>
  <Modal
    title="详情"
    v-model="modelView"
    :mask-closable="false"
    :fullscreen="false"
    :width="90"
    :closable="true"
    @on-visible-change="changeVisible">
    <Card style="margin:0 0 10px 0">
      <p slot="title">
        用户基本信息
      </p>
      <Row style="margin:0 0 25px 0" :gutter="10">
        <Col :span="11" offset="1">
          <img v-if="formData.avatar" class="user-logo" :src="formData.avatar">
          <Icon v-else type="ios-person" size="24"></Icon>
        </Col>
        <Col :span="12">
          id: {{formData.id}}
        </Col>
      </Row>
      <Row style="margin:0 0 10px 0">
        <Col :span="12">
          登录名: {{formData.loginName}}
        </Col>
        <Col :span="12">
          用户名: {{formData.userName}}
        </Col>
      </Row>
      <Row style="margin:0 0 10px 0">
        <Col :span="12">
          手机号: {{formData.phone}}
        </Col>
        <Col :span="12">
          邮箱: {{formData.email}}
        </Col>
      </Row>
      <Row style="margin:0 0 10px 0">
        <Col :span="12">
          密码错误次数: {{formData.errorTimes}}
        </Col>
        <Col :span="12">
          状态: {{formData.state_str}}
        </Col>
      </Row>
      <Row style="margin:0 0 10px 0">
        <Col :span="23">
          svn用户名: {{formData.svnUser}}
        </Col>
      </Row>
      <Row style="margin:0 0 10px 0">
        <Col :span="12">
          创建时间: {{formData.createdTime_str}}
        </Col>
        <Col :span="12">
          更新时间: {{formData.updatedTime_str}}
        </Col>
      </Row>
    </Card>
    <div slot="footer">
      <Button type="primary" @click="close">关闭</Button>
    </div>
  </Modal>
</template>

<script>
  import {getUserStateDesc} from '@/enum/SysEnum'
  import {getUser} from "@/api/sys/user"
  import {timeToString} from "@/util/dateUtil";

  export default {
    name: "detail",
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      initFormData: {
        id: null
      }
    },
    data() {
      return {
        modelView: false,
        formData: {
          avatar: null,
          id: null,
          loginName: null,
          userName: null,
          phone: null,
          email: null,
          errorTimes: null,
          state: null,
          state_str: null,
          createdTime: null,
          createdTime_str: null,
          updatedTime: null,
          updatedTime_str: null,
          svnUser: null
        }
      }
    },
    watch: {
      visible(newVal) {
        this.modelView = newVal
      }
    },
    methods: {
      changeVisible() {
        if (this.modelView) {
          this.queryDetail()
        } else {
          this.formData = {}
        }
        this.$emit('update:visible', this.modelView)
      },
      queryDetail() {
        const self = this
        const params = {
          id: self.initFormData.id
        }
        getUser(params)
          .then(response => {
            let result = response.data
            self.formData = result.data
            self.formData.state_str = getUserStateDesc(self.formData.state)
            self.formData.createdTime_str = timeToString(self.formData.createdTime)
            self.formData.updatedTime_str = timeToString(self.formData.updatedTime)
          })
          .catch((err) => {
            self.$Message.error({
              content: err,
              duration: 10,
              closable: true
            })
          })
      },
      close() {
        this.modelView = false
      }
    }
  }
</script>

<style scoped>
  .modal {
    height: 100px;
    overflow: auto;
  }
</style>
